<template>
    <div class="detail">
        <div class="time">统计时间:{{ time }}</div>
        <div class="statistics df" >
            <card v-for="(card, index) in cardList.slice(0,2)" :key="index" :data="card"></card>
        </div>
        <div class="statistics df">
            <card v-for="(card, index) in cardList.slice(2)" :key="index" :data="card"></card>
        </div>
    </div>
</template>

<script>
    import card from './components/statistics-card.vue';

    export default {
        name: 'detail',
        components: { card },
        computed: {
            countData() {
                return this.$store.state.countData;
            },
            time() {
                return this.countData.date;
            },
            cardList() {
                return [
                    {
                        add: this.countData.diagnosedIncr,
                        count: this.countData.diagnosed,
                        label: '全国确诊',
                    },
                    {
                        add: this.countData.suspectIncr,
                        count: this.countData.suspect,
                        label: '疑似病例',
                    },
                    {
                        add: this.countData.curedIncr,
                        count: this.countData.cured,
                        label: '治愈人数',
                    },
                    {
                        add: this.countData.deathIncr,
                        count: this.countData.death,
                        label: '死亡人数',
                    },
                    {
                        add: this.countData.seriousIncr,
                        count: this.countData.serious,
                        label: '重症人数',
                    },
                ];
            },
        },
        data() {
            return {};
        },
    };
</script>

<style lang="stylus" scoped>
    .time
        padding: 10px 20px  ;
        font-size: 20px;
        color: #222222;
        position: relative;
    .statistics
        padding 20px 0
        justify-content space-around
</style>
